<template>
	<view :class="['container','vh100',{'dark':theme == 'dark'}]">
		<view class="userinfo-card">
			<view class="card-box">
				<view class="balance-card-wrap">
					<view class="balance-card">
						<view class="xia">
							<view class="num">
								<view class="avatar-wrap">
									<image class="avatar"  :src="head" mode=""></image>
								</view>
								<text style="font-size: 4vw;margin-left: 2vw;" @click="funsItemClick(2)">
									<text style="font-size: 2.6vw;position: absolute;top: 3vw;right: 10vw;left: 26vw;">
										{{$t('bico.W214')}}:{{myOtc.nickName}}<image src="../../static/ico/vip.png" class="flex_image"></image></text>
									<text style="font-size: 4.6;position: absolute;top: 12vw;right: 10vw;left: 26vw;">
										{{$t('bico.W215')}}</text>
								</text>
							</view>
						</view>
						<!-- <view class="tit" style="font-size: 3vw;position: absolute;top: 22vw;right: 10vw;left: 6vw;">
							<text style="margin-left: 2vw;"> 设置的商家昵称将显示在法币交易市场</text></text>
						</view> -->
					</view>
				</view>
			</view>
		</view>
		<view class="flex alcenter mt10 plr20">
			<image src="../../static/image/tssp.png" class="wt15 h15"></image>
			<view class="chengse ft14 plr20">{{$t('bico.W216')}} </view>
		</view>
		<!-- 设置商家昵称 -->
		<view :class="['drlng','me-card','funs',{'darksss':theme=='dark'}]">
			<navigator @click="funsItemClick(2)" class="ptb20 ft14 flex alcenter between plr10">
				<span>{{$t('bico.W217')}}</span>
				<span class="flex alcenter">{{$t('bico.W218')}}<image src="../../static/image/mores.png" class="wt15 h15 ml10"></image></span>
			</navigator>
		</view>
		
		<!-- 设置商家微信 -->
		<!-- <view :class="['drlng','me-card','funs',{'darksss':theme=='dark'}]">
			<navigator @click="funsItemClick(3)" class="ptb20 ft14 flex alcenter between plr10">
				<span>微信</span>
				<span class="flex alcenter">修改<image src="../../static/image/mores.png" class="wt15 h15 ml10"></image></span>
			</navigator>
		</view> -->
		
		<!-- 设置商家银行卡 -->
		<!-- <view :class="['drlng','me-card','funs',{'darksss':theme=='dark'}]">
			<navigator @click="funsItemClick(4)" class="ptb20 ft14 flex alcenter between plr10">
				<span>银行卡</span>
				<span class="flex alcenter">修改<image src="../../static/image/mores.png" class="wt15 h15 ml10"></image></span>
			</navigator>
		</view> -->
		
		<!-- 设置商家支付宝 -->
		<!-- <view :class="['drlng','me-card','funs',{'darksss':theme=='dark'}]">
			<navigator @click="funsItemClick(5)" class="ptb20 ft14 flex alcenter between plr10">
				<span>支付宝</span>
				<span class="flex alcenter">修改<image src="../../static/image/mores.png" class="wt15 h15 ml10"></image></span>
			</navigator>
		</view> -->

		<!-- 商家身份证 -->
		<view :class="['drlng','me-card','funs',{'darksss':theme=='dark'}]">
			<navigator @click="funsItemClick(6)" class="ptb20 ft14 flex alcenter between plr10">
				<span>{{$t('bico.W219')}}</span>
				<span class="flex alcenter">{{$t('bico.W220')}}<image src="../../static/image/mores.png" class="wt15 h15 ml10"></image></span>
			</navigator>
		</view>
		
		<!-- 商家护照认证 -->
		<!-- <view :class="['drlng','me-card','funs',{'darksss':theme=='dark'}]">
			<navigator @click="funsItemClick(7)" class="ptb20 ft14 flex alcenter between plr10">
				<span>护照认证</span>
				<span class="flex alcenter">修改<image src="../../static/image/mores.png" class="wt15 h15 ml10"></image></span>
			</navigator>
		</view> -->
		
		<!-- 商家联系方式 -->
		<!-- <view :class="['drlng','me-card','funs',{'darksss':theme=='dark'}]">
			<navigator @click="funsItemClick(9)" class="ptb20 ft14 flex alcenter between plr10">
				<span>联系方式</span>
				<span class="flex alcenter">修改<image src="../../static/image/mores.png" class="wt15 h15 ml10"></image></span>
			</navigator>
		</view> -->
		
		<view :class="['drlng','me-card','funs',{'darksss':theme=='dark'}]">
			<navigator @click="funsItemClick(10)" class="ptb20 ft14 flex alcenter between plr10">
				<span>{{$t('bico.W221')}}</span>
				<span class="flex alcenter">{{$t('bico.W222')}}<image src="../../static/image/mores.png" class="wt15 h15 ml10"></image></span>
			</navigator>
		</view>
		<!-- 商家资金 密码 -->
		<view :class="['drlng','me-card','funs',{'darksss':theme=='dark'}]">
			<navigator @click="funsItemClick(8)" class="ptb20 ft14 flex alcenter between plr10">
				<span>{{$t('bico.W223')}}</span>
				<span class="flex alcenter">{{$t('bico.W224')}}<image src="../../static/image/mores.png" class="wt15 h15 ml10"></image></span>
			</navigator>
		</view>

	</view>
</template>

<script>
	import {mapState,mapActions,mapGetters} from 'vuex';
	import {myMixins} from '@/common/myMixins.js'
	export default{
		mixins:[myMixins],
		data(){
			return {
				head:'../../static/rvm.png',
				myOtc:{}
			}
		},
		computed:{
			...mapState({
			  theme:state=>state.theme
			}),
		},
		onLoad() {
			uni.setNavigationBarTitle({
				title:this.$t('bico.W225'),
			})
			this.$utils.setTheme(this.theme);
			
		},
		onShow(){
			this.myOtc=uni.getStorageSync('myOtc');
		},
		methods: {
			//路由开始
			funsItemClick(index){
				if(index==1){
					uni.navigateTo({
						url:'/pages/business/business'//法币商家
					})
				};
				if(index==2){
					uni.navigateTo({
						url:'/pages/business/SetNickname'//设置昵称
					})
				};
				if(index==3){
					uni.navigateTo({
						url:'/pages/business/Merchantwechat'//商家微信
					})
				};
				if(index==4){
					uni.navigateTo({
						url:'/pages/business/bankcard'//商家银行卡
					})
				};
				if(index==5){
					uni.navigateTo({
						url:'/pages/business/MerchantAlipay'//商家支付宝
					})
				};
				if(index==6){
					uni.navigateTo({
						url:'/pages/mine/userCenter'//身份认证
					})
				};
				
				if(index==7){
					uni.navigateTo({
						url:'/pages/business/passport'//护照认证
					})
				};

				if(index==8){
					uni.navigateTo({
						url:'/pages/mine/resetLegalPwd'//修改资金密码
					})
				};
				
				if(index==9){
					uni.navigateTo({
						url:'/pages/business/contactinformation'//联系方式
					})
				};
				
				if(index==10){
					if(this.myOtc.realStatus!='1'){
						this.$utils.showLayer(this.$t('bico.W31'));
						return
					}
					uni.navigateTo({
						url:'/pages/business/payWay'//联系方式
					})
				};
				
				
				
				
				
				
				
				
				
				
				
				

			},
			//路由结束
		},
	}
</script>

<style lang="scss">
	page {
		background: #f7f7f7;
	}

	.avatar{		
		width: 100rpx;
		height: 100rpx;
		border-radius: 50%;
	}
	.avatar {
		
	    background: #ffffff0a;
	    border-radius: 50%;
	    width: 16vw;
	    height: 16vw;
	    overflow: hidden;
	    border: 1vw solid #ffffff14;
	    position: relative;
	    display: inline-block;
	    vertical-align: top;
	    text-align: center;
	}
	.container {
		width: 100%;
		height: 100%;
		.flex_image {
		        width: 6vw;
				height: 6vw;
				border-radius: 50%;
				position: relative;
				top: 0.4vw;
		}
		.mt10 {
		    margin-top: 17px;
		}
		.me-card {
			    width: 96%;
			    padding: 0vw 2vw 0;
			    background-color: #fff;
			    border-radius: 4px;
			    margin-top: 10px;
			    position: relative;
			    top: 2vw;
			    left: 2vw;
		}
		.plr10 {
		    padding-left: 10px;
		    padding-right: 0px;
		}
		.userinfo-card {
			.card-box {
				width: 100%;
				height: 120px;
				position: relative;
				z-index: 0;

				.user-section {
					position: absolute;
					top: 0;
					z-index: 10;
					width: 100%;
					padding: 50upx 30upx 210upx;
					display: flex;

					.avatar-wrap {
						width: 100upx;
						height: 100upx;
						border-radius: 50%;
						overflow: hidden;
						position: relative;
						top: 1.2vw;

						.avatar {
							width: 100%;
							height: 100%;
						}
					}

					.portrait-box {
						margin-left: 18upx;
						display: flex;
						flex-direction: column;
						justify-content: space-between;

						.info-box {
							font-size: 38upx;
							
							font-weight: bold;
							color: #333;
						}

						.tuan {
							display: flex;
							align-items: center;

							.ma {
								font-size: 3.6vw;
								
								font-weight: 600;
								
							}

							.fuzi {
								width: 64upx;
								height: 34upx;
								background: #CCCCCC;
								border-radius: 15upx;
								font-size: 20upx;
								
								font-weight: 500;
								
								text-align: center;
								line-height: 34upx;
								margin-left: 10upx;
							}
						}
					}
				}

				.balance-card-wrap {
					width: 100%;
					height: 200upx;
					padding: 0 20upx;
					position: absolute;
					bottom: 0;
					z-index: 10;

					.balance-card {
						    width: 100%;
						    height: 90px;
						    background-image: url(../../static/business/businessbg.png);
						    background-position: 0% 0%;
						    background-size: 100% 100%;
						    background-repeat: no-repeat;
						    border-radius: 4px;
						    padding: 15px;

						.tit {
							
							font-weight: bold;
							color: #FFF;
							font-size: 4.2vw;
							position: absolute;
							top: 3vw;
							right: 10vw;
							left: 6vw;
						}

						.xia {
							width: 100%;
							display: flex;
							justify-content: space-between;

							.num {
								font-size: 70upx;
								
								font-weight: bold;
								color: #FFF;
							}

							.withdraw-btn {
								width: 75px;
								height: 30px;
								line-height: 30px;
								text-align: center;
								background: #243eccad;
								font-size: 12px;
								
								font-weight: 500;
								color: #FFF;
								border-radius: 2vw;
								position: relative;
								top: 0vw;
							}
						}
					}
				}
			}

		}

		.main {
			padding: 20upx;

			.income-card {
				width: 100%;
				background-color: #fff;
				border-radius: 20upx;
				padding: 30upx;
				margin-top: 20upx;

				.tit {
					display: flex;
					align-items: center;
					justify-content: space-between;
					font-size: 3.6vw;
					line-height: 32upx;
					
					font-weight: bold;
					

					image {
						width: 10upx;
						height: 21upx;
					}
				}

				.show-content {
					display: flex;
					justify-content: space-around;
					align-items: center;
					margin-top: 40upx;

					.view-category {
						display: flex;
						flex-direction: column;
						align-items: center;
						justify-content: center;

						.num {
							font-size: 3.6vw;
							
							font-weight: 600;
							position: relative;
							top: -1vw;
							
						}
						
						.funsItemImage {
							position: relative;
							top: -1vw;
						    width: 6vw;
						    height: 6vw;
						    border-radius: 50%;
						}

						.text {
							font-size: 3vw;
							
							font-weight: 700;
							
						}
					}

					.line {
						width: 1px;
						height: 65upx;
						background-color: #5559691f;
					}
				}
			}
			
			

			.tool-card {
				background-color: #ffffff;
				width: 100%;
				padding: 0 30upx;
				margin-top: 20upx;
				border-radius: 20upx;

				.tool-item {
					display: flex;
					flex-direction: row;
					width: 100%;
					height: 100upx;
					align-items: center;
					justify-content: space-between;

					.view-image-left {
						width: 44upx;
					}

					.item-right {
						flex: 1;
						display: flex;
						flex-direction: row;
						align-items: center;
						justify-content: space-between;

						.view-text {
							margin-left: 0px;
							font-size: 3.4vw;
							
							font-weight: bold;
							
						}
						
						.view-image-right {
							width: 10upx;
							height: 21upx;
						}
						
						.funsItemImage {
						    width: 6vw;
						    height: 6vw;
						    border-radius: 50%;
						}
						
					}
				}
			}
		}
	}
	
</style>

